<template>
  <div class="saveBankcard">
    <el-dialog :title="bankcard_id?$t('cards.edit_bankcard_info'):$t('cards.add')" :visible.sync="showDialog"
               :showBankcardInfo="showBankcardInfo" @close='hidden'>
      <el-form class="small-space" ref="bankcardForm" label-position="right" label-width="12rem" :model="bankcardDetail" :rules="rules">
        <el-row>
          <el-col :sm="12" :offset="6">
            <el-form-item :label="$t('cards.bankcard_name') + '：'" prop=".name">
              <el-input v-model="bankcardDetail.name" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.business_info') + '：'">
              <el-select v-model.number="bankcardDetail.mch_id" :placeholder="$t('cards.pls_choose')">
                <el-option v-for="mch of MchList" :key="mch.id" :label="mch.name" :value="mch.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cards.bankcard_no') + '：'">
              <el-input v-model="bankcardDetail.account_number" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.acct_holder') + '：'">
              <el-input v-model="bankcardDetail.account_holder" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.bank') + '：'">
              <el-input v-model="bankcardDetail.bank" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.pay_type')  + '：'" v-show="bankcard_type==type.DEPOSIT">
              <el-select v-model.number="bankcardDetail.pay_type" :placeholder="$t('cards.select') + $t('cards.pay_type')">
                <el-option v-for="(statu, index) of PayTypeArray" :key="index" :label="statu" :value="PayType[index]"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cards.subbranch') + '：'">
              <el-input v-model="bankcardDetail.subbranch" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.status') + '：'">
              <el-select v-model.number="bankcardDetail.status" :placeholder="$t('cards.pls_choose')">
                <el-option v-for="(statu, index) of statusArray" :key="index" :label="statu" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cards.phone') + '：'">
              <el-input v-model="bankcardDetail.phone" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.weight') + '：'" v-if="bankcard_type!==1">
              <el-input v-model="bankcardDetail.weight" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.recharge_limit') + '：'">
              <el-input v-model="bankcardDetail.daily_recharge_limit" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.desc') + '：'">
              <el-input v-model="bankcardDetail.desc" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.login_acct_name') + '：'">
              <el-input v-model="bankcardDetail.account" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.password') + '：'">
              <el-input v-model="bankcardDetail.password" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.max_cash_flow')">
              <el-input-number v-model="bankcardDetail.max_cash_flow" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('cards.min_balance_limit') + '：'" v-show="bankcard_type===type.WITHDRAW">
              <el-input-number v-model="bankcardDetail.min_balance_limit" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('cards.max_balance_limit') + '：'" v-show="bankcard_type===type.DEPOSIT">
              <el-input-number v-model="bankcardDetail.max_balance_limit" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('cards.min_auto_close') + '：'">
              <el-input-number v-model="bankcardDetail.min_withdraw_order" :min="1" :max="500"></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('cards.max_auto_close') + '：'">
              <el-input-number v-model="bankcardDetail.max_withdraw_order" :min="1" :max="500"></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('cards.payment_password') + '：'">
              <el-input v-model="bankcardDetail.pay_password" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.u_password') + '：'">
              <el-input v-model="bankcardDetail.ukey_password" placeholder="..."></el-input>
            </el-form-item>
            <el-form-item :label="$t('cards.u_expiration') + '：'">
              <el-date-picker v-model="bankcardDetail.usheild_date" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" :placeholder="$t('cards.pls_choose_time') + '：'"></el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('cards.opening_time') + '：'">
              <el-input-number v-model="bankcardDetail.opening_time" :min="0" :max="24"></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('cards.closing_time') + '：'">
              <el-input-number v-model="bankcardDetail.closing_time" :min="0" :max="24"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showBankcardInfo', false)">{{$t('cards.cancel')}}</el-button>
        <el-button v-if="bankcard_id" type="primary" :loading="loading" @click="updateBankcardInfo">{{$t('cards.save')}}</el-button>
        <el-button v-else type="primary" :loading="loading" @click="saveBankcardInfo">{{$t('cards.save')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {comparativeData} from '@/utils/patch'
  import {getBankcardDetail, saveBankcard, updateBankcard} from '@/api/merchant'
  export default {
    name: 'UserSet',
    data() {
      return {
        showDialog: this.showBankcardInfo,
        loading: false,
        bankcardDetail: {},
        statusArray: [this.$t('cards.inactive'), this.$t('cards.active')],
        olddata: {},
        type: { DEPOSIT: 0, WITHDRAW: 1, BUFFER: 2 },
        rules: {
          name: [
            { required: true, pattern: /([^\s])/, message: this.$t('cards.enter_bankcard_name'), trigger: 'change' }
          ]
        }
      }
    },
    props: {
      showBankcardInfo: {
        type: Boolean,
        default: false
      },
      bankcard_id: {
        type: Number
      },
      MchList: {
        type: Array
      },
      bankcard_type: {
        type: Number
      },
      PayTypeArray: {
        type: Array
      },
      PayType: {
        type: Array
      }
    },
    created(){
      if (this.bankcard_id) {
        this.getbankcardDetail()
      }
    },
    methods: {
      saveBankcardInfo(){
        if(!this.isValidateForm()) return;

        this.bankcardDetail.type = this.bankcard_type

        if(this.bankcardDetail.type === this.type.WITHDRAW) {
          this.bankcardDetail.max_balance_limit = 1
        } else {
          this.bankcardDetail.min_balance_limit = 1
        }

        saveBankcard(this.bankcardDetail).then(res => {
          if (res.status === 0) {
            this.$message({message: this.$t('cards.success_add'), type: 'success'})
            this.$emit('update:showBankcardInfo', false)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      updateBankcardInfo(){
        if(!this.isValidateForm()) return;
        
        let newdata = comparativeData(this.bankcardDetail, this.olddata)
        updateBankcard(newdata, this.bankcard_id).then(res => {
          if (res.status === 0) {
            this.$message({message: this.$t('cards.success_edit'), type: 'success'})
            this.$emit('update:showBankcardInfo', false)
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      isValidateForm(){
        let isValid = false
        this.$refs['bankcardForm'].validate((valid) => { isValid = valid })
        return isValid
      },
      getbankcardDetail(){
        getBankcardDetail(this.bankcard_id).then(res => {
          if (res.status === 0) {
            this.bankcardDetail = res.data
            this.olddata = JSON.stringify(res.data)
          }
        })
      },
      hidden() {
        this.$emit('update:showBankcardInfo', false)
        this.$refs['bankcardForm'].resetFields();
      }
    },
    watch: {
      showBankcardInfo() {
        this.showDialog = this.showBankcardInfo
      }
    }
  }
</script>

<style lang="scss">
  .saveBankcard{
    .el-dialog { min-width: 940px }
    .ChannelType {
      .el-tabs__nav {
        margin: 0 8rem
      }

      .el-button {
        color: #ffffff;
        width: 2.5rem;
        margin: 0.1rem;
        padding: 0.5rem 0;
        text-align: center;
        span {
          margin-left: 0;
        }
      }

      .el-button + .el-button {
        margin-left: 0.1rem;
      }

      .el-button:hover {
        color: #b1b1b1;
      }

    }

  }
</style>
